:root {
    --brightGreen: #00e677;
    --semiBrightGreen: #1C8B5A;
    --nedbankGreen: #023929;
    --medGreen: #003a29;
    --darkGreen: #0a240d;
    --lightGreen: #DFEDEA;
    --lightGrey: #f1f1f1;
    --darkGrey: rgb(20, 20, 20);
    --mintGreen: #DFEDEA;
    --black: #000000;
    --white: #fff;
}

@font-face {
    font-family: LibreFranklin;
    src: url('../fonts/LibreFranklin-VariableFont_wght\ 2.ttf');
}

html,
body {
    overflow-x: hidden !important;
}

* {
    box-sizing: border-box;
}

#navbar-root {
    display: none;
}

#innerContainer {
    margin-top: 3rem;
}

section.page-content-area {
    padding-inline: 8rem;
    padding-block: 3rem;
}

.page-header {
    padding-inline: 8rem;
}

/******* Text Styles *******/
.home-heading,
.landing-text-bold,
.landing-text,
.heading-style-1-white,
.stat,
.stat-subtitle,
.txt-page-heading {
    font-family: LibreFranklin;
    color: white;
}

.home-heading {
    font-weight: 700;
    font-size: 3.5rem;
    text-align: right;
}

.landing-text-bold {
    font-weight: 700;
    font-size: 1.5rem;
    text-align: right;
}

.landing-text {
    font-weight: 200;
    font-size: 1.5rem;
    font-style: italic;
    text-align: right;
}

.heading-style-1 {
    font-size: 2.5rem;
    font-weight: 700;
}

.txt-page-heading {
    margin-bottom: 0;
}

.home-background {
    background-image: url('https://myactive-cdn-bzf7hybveyewfjdh.a02.azurefd.net/wm-1768198-cmsimages/General/home-background.webp');
    background-size: 100% 100%;
    background-color: var(--medGreen);
    background-repeat: no-repeat;
    padding-top: 0rem;
}

.home-banner-images {
    height: 40vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.white {
    color: white;
}

.black {
    color: var(--black);
}

.dark-green {
    color: var(--darkGreen);
}

.ned-green {
    color: var(--nedbankGreen);
}

.med-green {
    color: var(--medGreen);
}

.bold {
    font-weight: 600;
}

.text-card-heading,
.text-card- content,
.card-link,
.card-news-title,
.card-news-text,
.card-date,
.txt-cta-text,
.heading-style-1,
.heading-style-2,
.heading-style-4,
.heading-style-3 {
    font-family: LibreFranklin;
}

.text-style-1 {
    font-size: 1rem;
    font-family: LibreFranklin;
}

.text-style-1-header {
    margin-block: 1rem 0rem;
}

.text-style-2 {
    font-size: 1.5rem;
    font-family: LibreFranklin;
}

.text-style-3 {
    font-size: 0.8rem;
    font-family: LibreFranklin;
}

.heading-style-1 {
    margin-bottom: 2rem;
}

.heading-style-2 {
    font-size: 2rem;
    font-weight: 600;
}

.heading-style-3 {
    font-size: 1.4rem;
    font-weight: 600;
}

.heading-style-4 {
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--nedbankGreen);
    line-height: 2.5rem;
    margin-bottom: 1.5rem;
}

.heading-style-5 {
    font-size: 1.4rem;
    font-weight: 600;
    font-family: LibreFranklin;
}

.heading-style-6 {
    font-size: 2rem;
    font-family: LibreFranklin;
    text-align: center;
    margin-top: 3rem;
}


.text-card-heading {
    font-weight: 500;
}

.text-card-content {
    font-weight: 400;
}

.stat {
    font-size: 4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.2rem;
}

.stat-subtitle {
    text-align: center;
    margin-bottom: 0px;
}

.card-link {
    font-weight: 300;
    color: var(--black);
}

#latest-news-section .col-12.col-lg-10 {
    margin-inline: auto
}

/*Home styling*/

.card-news-text {
    font-size: 1rem;
    font-weight: 300;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0.75rem;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.news-items-row .card-news-text {
    flex-grow: 1;
}

.card-news-title {
    font-size: 1.2rem;
    font-weight: 500;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-date {
    margin-bottom: 0;
    text-align: right;
}

.txt-cta-text {
    text-align: center;
}

.txt-cta-title {
    font-weight: 700;
    font-size: 3rem;
    text-align: center;
    color: white;
}

.txt-test-name,
.txt-test-title,
.txt-test-quote,
.txt-section-heading,
.txt-body-style-1 p {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.txt-test-name {
    font-weight: 700;
    padding-left: 0.5rem;
}

.txt-test-title {
    font-weight: 300;
    padding-left: 0.5rem;
}

.txt-test-quote {
    font-weight: 700;
    font-size: 1.5rem;
}

.txt-section-heading {
    font-weight: 800;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    margin-top: 3rem;
}

.bold {
    font-weight: 700;
}

.italics {
    font-style: italic;
}

/******* End Text Styles *******/

/******* Button Styles *******/
.btnStyle1,
.btnStyle2,
.btnStyle3,
.btnStyle4 {
    font-family: LibreFranklin;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    min-width: 13rem;
}

.btnStyle1 {
    border: 2px solid var(--brightGreen);
    color: var(--brightGreen);
    background-color: var(--medGreen);
    padding-inline: 2rem;
    padding-block: 0.3rem;
    font-size: 1rem;
}

.btnStyle1.wide {
    min-width: 20rem;
}

.btnStyle1:hover {
    color: var(--white);
    border: 2px solid var(--white);
}

.btnStyle2 {
    color: white;
    background-color: var(--medGreen);
    padding-block: 0.3rem;
    border: 1px solid var(--white);
}

.btnStyle2.stretch-edge {
    border: 2px solid var(--medGreen);
}

a.btnStyle2 {
    text-align: center;
}

a.btnStyle2:hover {
    color: white;
}

.btnStyle2.stretch-edge:hover {
    color: var(--medGreen);
    border: 2px solid var(--darkGreen);
    background-color: var(--white);
}

.stretch-edge {
    width: 100%;
    display: block;
}

.home-button-spacer {
    margin-top: 2rem;
}

#submit-btn.home-button-spacer {
    margin-top: 1rem;
}

.btn-cta {
    padding-inline: 3rem;
}

.btnStyle3 {
    border: 2px solid var(--medGreen);
    color: var(--medGreen);
    background-color: var(--white);
    padding-inline: 2rem;
    padding-block: 0.3rem;
}

.btnStyle3:hover {
    border: 2px solid var(--white);
    color: var(--white);
    background-color: var(--medGreen);
    padding-inline: 2rem;
    padding-block: 0.3rem;
    transition: background-color 0.3s ease;
}

.btnStyle4 {
    background-color: white;
    color: var(--medGreen);
}

#btnBack.btnStyle3 {
    border: 0px solid transparent;
    color: black;
    text-decoration: underline;
}

#btnBack.btnStyle3:hover {
    border: 0px solid transparent;
    color: black;
    text-decoration: underline;
    background-color: transparent;
}

#btnUserBackToDashboard.btnStyle3 {
    border: 0px solid transparent;
    color: black;
    text-decoration: underline;
}

#btnUserBackToDashboard.btnStyle3:hover {
    border: 0px solid transparent;
    color: black;
    text-decoration: underline;
    background-color: transparent;
}

/******* End Button Styles *******/


/******* Navbar *******/

#navbar-section {
    font-family: LibreFranklin;
    color: var(--nedbankGreen);
}

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    transition: top 0.5s ease;
    z-index: 999;
}

.nav-link:hover {
    color: var(--nedbankGreen);
}

.dropdown-item:hover {
    color: var(--nedbankGreen);
}

.nav-item .nav-link.active {
    font-weight: 500;
    color: var(--nedbankGreen);
}

.navbar-nav .btnStyle3.btnTestimonial {
    margin-top: 0rem;
}

.search-input.desktop-version {
    border-radius: 2rem;
    padding: 0.3rem 1rem;
    width: 8rem;
}

.navbar-brand.logo {
    text-align: center;
}

#navbar-section .nav-item {
    margin-block: auto;
}

#navbarSupportedContent.navbar-collapse {
    justify-content: center;
}

#navbar-section .holding-container {
    width: 100%;
}

#navbar-section .navbar-logo-section {
    display: flex;
    justify-content: center;
}

#navbar {
    position: fixed;
    top: 0;
    width: 100%;
    /* transition: top 0.5s ease; */
    z-index: 999;
}

#navbarSupportedContent.collapse.navbar-collapse .nav-item {
    margin-inline: 0.3rem;
}

#navbar .nav-item #register-btn,
#navbar .nav-item #login-btn {
    min-width: 12rem;
}

#navbar .nav-item #register-btn {
    background-color: var(--medGreen);
    color: var(--white);
    border-color: var(--medGreen);
}

#navbar .nav-item #register-btn:hover {
    background-color: var(--white);
    color: var(--medGreen);
    border-color: var(--medGreen);
}

/******* Navbar End *******/


/******* Home *******/
.vertically-aligned-col {
    display: flex;
    align-items: center;
}

.home-video-bg {
    background: linear-gradient(88.431deg, rgba(1, 61, 43, 90%) 0%, #003A29 50%, #231F20 94%);
}

.section-space {
    padding-block: 3rem;
}

.vid-container {
    aspect-ratio: 16/9;
    height: 16vw;
    border-radius: 20px;
}

.card-style-1 {
    border-radius: 20px !important;
    box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 25%);
    min-height: 16rem;
    margin: 0.7rem;
}

.owl-carousel-spacing .item {
    margin-right: 5rem;
    display: flex;
    justify-content: center;
}

.card-spacing {
    margin: 0.8rem;
}

.card-flex {
    display: flex;
    flex-direction: column;
}

.card-body.card-flex {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem;
    min-height: 0;
}

.apparel {
    padding-block: 0rem 2rem;
}

.gear-image {
    height: 40vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.bg-green {
    background-color: var(--medGreen);
}

.card-news-img {
    border-radius: 20px;
    height: 11rem;
    width: 100%;
    object-fit: contain;
    display: block;
}

.btnStyle3.btnTestimonial {
    margin-top: 2rem;
}

.owl-carousel .owl-item,
.owl-carousel .item {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.owl-dot.active span {
    background-color: var(--medGreen) !important;
}

.card-style-2 {
    height: 100%;
    overflow: hidden;
    border-radius: 20px !important;
    box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 25%);
    min-height: 18rem;
    margin: 0.7rem;
    background-color: var(--lightGrey) !important;
}

.news-items-row .card-style-2 {
    display: flex;
    flex-direction: column;
}

.card-news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: auto;
}

.bg-mint {
    background-color: var(--mintGreen);
}

.bg-white {
    background-color: white;
}

.home-cta {
    border-top-right-radius: 500px;
    border-bottom-right-radius: 500px;
}

.cta-image {
    max-width: 100%;
    height: auto;
    display: block;
}

#bubble-row {
    flex: 1;
    width: 100%;
}

#more-than-a-club {
    border-top: 1rem solid var(--medGreen);
    border-bottom: 1rem solid var(--medGreen);
    padding-inline: 0;
}

#carousel-testimonial {
    border-radius: 20px;
}

.carousel-indicators button[data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: grey;
    opacity: 0.5;
}

.carousel-indicators button.active {
    opacity: 1;
    background-color: var(--medGreen);
    /* active dot color */
}

.testimonial-image-div {
    border: 2px solid var(--brightGreen);
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1/1;
    height: 10rem;
}

.testimonial-image-div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-name {
    border-left: 2px solid var(--medGreen);
    margin-top: 1rem;
}

/* Ensure the arrows are always visible */
.carousel-control-prev,
.carousel-control-next {
    opacity: 1;
    width: 3rem;
    height: 3rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Position the next/prev button */
.carousel-control-prev {
    left: 1rem;
}

.carousel-control-next {
    right: 1rem;
}

/* Create the circular background for the controls */
.carousel-control-prev::before,
.carousel-control-next::before {
    content: "";
    /* Needed for ::before pseudo-elements */
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid var(--medGreen);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
    width: 1.5rem;
    height: 1.5rem;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003a29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23003a29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.testimonial-runner-col {
    margin-block: 5rem;
}

/******* Common *******/
.page-header {
    background: linear-gradient(-90deg, rgba(0, 255, 106, 85%) 0%, rgba(0, 63, 43, 85%) 65%, rgba(0, 0, 0, 85%) 93%);
    padding-block: 3rem;
    margin-bottom: 0rem;
}

.page-header-clubs {
    background: linear-gradient(-90deg, rgba(0, 255, 106, 85%) 0%, rgba(0, 63, 43, 85%) 65%, rgba(0, 0, 0, 85%) 93%);
    padding-block: 3rem;
}

.page-content-section {
    padding-block: 3rem;
}

.page-subtext {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.page-subtext {
    margin-top: 1.5rem;
}

.contacts-area .finer-details {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}


.contacts-area .icon {
    filter: grayscale(1);
    opacity: 0.85;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    margin: 0.2rem 0.1rem;
}

/******* About us *******/


.img-about-us {
    border-radius: 20px;
    width: 90%;
    box-shadow: -15px 15px rgba(127, 135, 133, 0.5);
    margin-inline: 0.7rem;
}

#accordion-of-winners-horizontal {
    background: url("https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/about-us-bg-1.png"), rgb(0, 0, 0);
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(70%) brightness(70%);
    border-radius: 20px;
    display: flex;
    width: 100%;
    height: 600px;
    overflow: hidden;
    align-items: stretch;
}

#accordion-of-winners-horizontal .accordion-item {
    flex-direction: row;
    flex-shrink: 0;
    min-width: 50px;
    height: 100%;
    border-right: 1px solid var(--bs-accordion-border-color);
}

#accordion-of-winners-horizontal .accordion-header {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#accordion-of-winners-horizontal .accordion-button {
    /* Apply rotation to the button text */
    height: 100%;
    width: 100%;
    padding: 0.5rem 0.5rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
}

/* The actual collapsing element (where collapse-horizontal is) */
#accordion-of-winners-horizontal .accordion-collapse.collapse-horizontal {
    flex-grow: 1;
    height: 100%;
    order: 1;
}

#accordion-of-winners-horizontal .accordion-body {
    /* CRITICAL: Set the expanded width for the collapse transition */
    width: 800px;
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
    writing-mode: horizontal-tb;
    transform: none;
    font-family: LibreFranklin;
    color: white;
    background-color: rgba(0, 28, 0, 0.94);
    height: 100%;
    border-radius: 20px;
}

/* Ensures the collapsed content pane has zero width */
#accordion-of-winners-horizontal .accordion-collapse:not(.show) {
    width: 0 !important;
}

/* Hide content inside the collapsed panel to prevent overflow/peeking */
#accordion-of-winners-horizontal .accordion-collapse:not(.show) .accordion-body {
    visibility: hidden;
}


#accordion-of-winners-horizontal .accordion-button:not(.collapsed)::after {
    background-image: none;
    width: 0;
}

#accordion-of-winners-horizontal .accordion-button:focus {
    outline: none;
    box-shadow: none;
}

#accordion-of-winners-horizontal .accordion-button::after {
    background-image: none;
    width: 0;
}

#accordion-of-winners-horizontal .accordion-item {
    display: flex;
    background-color: transparent;
}

#accordion-of-winners-horizontal .accordion-button {
    display: block;
    text-align: center;
    font-family: LibreFranklin;
    color: white;
    font-size: 2rem;
    background-color: rgba(15, 15, 15, 0.65);
}

#accordion-of-winners-horizontal-2 .accordion-item {
    flex-direction: row;
    flex-shrink: 0;
    min-width: 50px;
    height: 100%;
    border-right: 1px solid var(--bs-accordion-border-color);
}

#accordion-of-winners-horizontal-2 .accordion-header {
    flex-shrink: 0;
    flex-grow: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#accordion-of-winners-horizontal-2 .accordion-button {
    /* Apply rotation to the button text */
    height: 100%;
    width: 100%;
    padding: 0.5rem 0.5rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: center;
    display: block;
    text-align: center;
    font-family: LibreFranklin;
    color: white;
    font-size: 2rem;
    background-color: rgba(15, 15, 15, 0.65);
}

#accordion-of-winners-horizontal-2 .accordion-collapse.collapse-horizontal {
    flex-grow: 1;
    height: 100%;
    order: 1;
}

#accordion-of-winners-horizontal-2 .accordion-body {
    width: 800px;
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
    writing-mode: horizontal-tb;
    transform: none;
    font-family: LibreFranklin;
    color: white;
    background-color: rgba(0, 28, 0, 0.94);
    height: 100%;
    border-radius: 20px;
}

/* Ensures the collapsed content pane has zero width */
#accordion-of-winners-horizontal-2 .accordion-collapse:not(.show) {
    width: 0 !important;
}

/* Hide content inside the collapsed panel to prevent overflow/peeking */
#accordion-of-winners-horizontal-2 .accordion-collapse:not(.show) .accordion-body {
    visibility: hidden;
}

#accordion-of-winners-horizontal-2 .accordion-button:not(.collapsed)::after {
    background-image: none;
    width: 0;
}

#accordion-of-winners-horizontal-2 .accordion-button:focus {
    outline: none;
    box-shadow: none;
}

#accordion-of-winners-horizontal-2 .accordion-button::after {
    background-image: none;
    width: 0;
}

#accordion-of-winners-horizontal-2 .accordion-item {
    display: flex;
    background-color: transparent;
}

#accordion-of-winners-horizontal-2 {
    background: url("https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/about-us-bg-2.png"), rgb(0, 0, 0);
    background-size: cover;
    background-repeat: no-repeat;
    filter: saturate(70%) brightness(75%);
    border-radius: 20px;
    margin-block: 3rem;
    width: 100%;
    height: 600px;
}

.txt-section-heading.winners {
    margin-block: 1rem 0rem;
}

/* End code to remove the button highlights */

#accordion-of-winners-mobile .accordion-button:not(.collapsed)::after {
    background-image: none;
    width: 0;
}

#accordion-of-winners-mobile .accordion-button:focus {
    outline: none;
    box-shadow: none;
}

#accordion-of-winners-mobile .accordion-button::after {
    background-image: none;
    width: 0;
}

#accordion-of-winners-mobile .accordion-item {
    background-color: var(--darkGrey);
    color: white;
    font-family: LibreFranklin;
    font-size: 1.1rem;
}

#accordion-of-winners-mobile .accordion-button:focus {
    box-shadow: none;
}

#accordion-of-winners-mobile .accordion-button:not(.collapsed),
#accordion-of-winners-mobile .accordion-button:is(.collapsed) {
    font-family: LibreFranklin;
    color: white;
    background-color: var(--darkGreen);
    font-size: 1.3rem;
}

#accordion-of-winners-horizontal .accordion-button:hover,
#accordion-of-winners-horizontal-2 .accordion-button:hover {
    background-color: rgba(0, 28, 0, 0.94);
}

.container-fluid.accordion-container {
    --bs-gutter-x: 0;
}

.year-container {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    padding: 0rem 0;
}

.year-ball {
    width: 170px;
    height: 170px;
    margin: 0.8rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(145deg,
            #1cff72 0%,
            #00b050 40%,
            #007a33 100%);
    box-shadow:
        0 15px 25px rgba(0, 0, 0, 0.25),
        inset 0 -10px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.year-ball:hover {
    transform: translateY(-2px);
}

.balls-section-row {
    justify-content: center;
}

#comrades-winners,
#two-oceans-winners {
    background-color: white;
    border-radius: 2rem;
}

.page-content-section.balls-section .tab-pane.page-content-area.personal {
    padding-inline: 3rem;
}

/******* Our Sponsors *******/
.sponsor-subtext,
.card-body p,
.card-body .link {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.card-style-sponsors span {
    font-family: LibreFranklin;
    color: white;
}

.title-sponsor-section {
    padding-bottom: 3rem;
}

.sponsor-subtext {
    margin-top: 1.5rem;
}

.card-body .link {
    font-weight: 700;
    text-decoration: none;
}

.card-style-sponsors {
    border-radius: 20px;
    box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 25%);
    margin-block: 1rem;
}

.card-style-sponsors a {
    color: var(--darkGreen);
}

.card-img-top.sponsor-image {
    height: 9rem;
    object-fit: contain;
    margin-inline: auto;
    margin-bottom: 0;
    margin-top: 1.5rem;
    display: block;
    padding: 0.5rem;
    max-width: 80%;
}

.badge {
    font-size: 0.75rem;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
    padding-inline: 0.5rem;
    background-color: var(--nedbankGreen);
    margin-top: 0 !important;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.badge.tier {
    min-width: 4rem;
}

/******* Race Results *******/
.race-results .card-style-results {
    border-radius: 20px;
    box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 25%);
    margin: 0 auto;
    margin-block: 1rem;
}

.race-results .card-style-results a {
    text-decoration: none;
}

.arrow {
    color: var(--medGreen);
    font-size: 1.8rem;
    text-align: end;
    margin-bottom: 0;
    margin-right: 1rem;
    pointer-events: none;
}

p.arrow::after {
    content: "→";
}

.race-results {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

/******* National Race Calendar *******/
.race-results .soweto-card {
    background-color: #002c5d;
}

.race-results .soweto-card p {
    color: white;
}

.card-img-top.race-calendar-image {
    height: 12rem;
    object-fit: contain;
    margin-inline: auto;
    margin-bottom: 0;
    margin-top: 1.5rem;
    display: block;
    padding: 0.5rem;
    max-width: 80%;
}

/******* FAQ *******/
.faq-page {
    padding-top: 3rem;
    padding-bottom: 4rem;
}

.faq-accordion {
    padding-block: 2rem;
}

/*Accordion rounded corners*/
.faq-accordion .accordion-item:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
}

.faq-accordion .accordion-item:last-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.faq-question-text,
.faq-answer-text {
    font-family: LibreFranklin;
    color: var(--medGreen);
}

.faq-question-text {
    font-weight: 600;
    padding-block: 1.8rem;
}

#faq-accordion .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--bs-body-color);
}

#faq-accordion .accordion-button:focus {
    outline: none;
    box-shadow: none;
    color: var(--medGreen);
}

.faq-page .faq-accordion a {
    color: var(--medGreen);
}

.bg-darkgreen {
    background-color: var(--darkGreen);
}

.cta-shared {
    border-radius: 20px;
    padding-block: 2.5rem;
    margin-bottom: 2rem;
}

.cta-shared-heading,
.cta-shared-text {
    color: white;
    font-family: LibreFranklin;
    text-align: center;
}

.cta-shared-heading {
    font-weight: 700;
    font-size: 2.2rem;
}

.cta-shared-text {
    font-size: 1.2rem;
}

.cta-btn-div {
    margin-top: 2.5rem;
}

.cta-btn {
    font-size: 1rem;
    font-weight: 600;
    padding-inline: 1.6rem;
    padding-block: 0.5rem;
}

a.cta-btn:hover {
    color: inherit;
}

.white-block {
    background-color: white;
    border-radius: 20px;
    padding-block: 2rem;
    box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 25%);
    margin-bottom: 2rem;
}

.faq-contact-heading,
.faq-contact-text {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.faq-contact-heading {
    font-weight: 700;
    font-size: 2.2rem;
}

.faq-contact-text {
    font-size: 1.2rem;
}

.faq-contact-btn {
    font-size: 1.6rem;
    font-family: LibreFranklin;
    color: white;
    padding-inline: 3rem;
    padding-block: 0.5rem;
}

/******* How to become a member *******/
.heading-btn-div {
    margin-top: 3rem;
}

.heading-btn-div .btnStyle2 {
    width: 80%;
    height: 60%;
}

.heading-btn-div .btnStyle2:hover {
    background-color: var(--white);
    color: var(--medGreen);
    border: 1px solid var(--medGreen);
}

#temp-elite-profiles .kit-card .kit-title {
    background: linear-gradient(90deg, rgba(1, 61, 43, 90%) 0%, #003A29 50%, #110f0f 94%) !important;
}

#temp-elite-profiles .btn-success {
    background-color: var(--medGreen);
    border-color: var(--medGreen);
}

#temp-elite-profiles .btn-success {
    background: var(--medGreen);
    border-color: var(--medGreen);
    border: 1px solid var(--medGreen);
    border-radius: 2rem;
    min-width: 20rem;
}

/* 1 - 2 - 3*/
.step-indicator {
    position: relative;
    padding: 20px 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.step-item {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    flex-grow: 1;
    z-index: 10;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--darkGreen);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.125rem;
    z-index: 20;
    flex-shrink: 0;
}

.step-line-right {
    height: 2px;
    background-color: var(--darkGreen);
    flex-grow: 1;
    margin-left: 5px;
}

.step-line-left {
    height: 2px;
    background-color: var(--darkGreen);
    flex-grow: 1;
    margin-right: 5px;
}

.step-number {
    aspect-ratio: 1 / 1;
    width: clamp(2rem, 6vw, 2.75rem);
    font-size: clamp(1rem, 4vw, 1.8rem);
}

.step-item:first-child .step-line-left {
    display: none;
}

.step-item:last-child .step-line-right {
    display: none;
}

.step-block {
    border-radius: 20px;
    padding-block: 2rem;
    margin-bottom: 2rem;
}

.step-number {
    aspect-ratio: 1 / 1;
    background-color: var(--medGreen);
    font-family: LibreFranklin;
    color: white;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.75rem;
    height: 2.75rem;
    font-weight: bold;
    font-size: 1.8rem;
    border-radius: 50%;
}

.step-heading {
    margin-bottom: 0;
}

.step-subtitle {
    padding-block: 1rem;
    text-align: center;
}

.step-subtitle p {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.step-logo-div svg {
    fill: var(--medGreen);
    aspect-ratio: 1/1;
    height: 24px;
}

.step-subheading,
.step-items li {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.step-subheading {
    font-size: 1.2rem;
}

.step-1-row {
    padding-bottom: 1rem;
}

.step-2-attach svg {
    fill: var(--medGreen);
    aspect-ratio: 1/1;
    height: 2rem;
}

.step-3-card {
    background-color: white;
    border-radius: 20px;
    width: 85%;
    padding-block: 1rem;
    padding-inline: 1rem;
    margin-bottom: 1rem;
}

.step-3-card-heading,
.step-3-card-text {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.step-3-card-heading {
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.step-3-card-text {
    font-size: 1rem;
}

.step-3-card-img svg {
    fill: var(--medGreen);
    width: 18%;
    height: auto;
}

svg.step-3-order {
    fill: none;
}

.become-member-footer {
    margin-bottom: 2rem;
}

.tick-bullets li {
    list-style: none;
    position: relative;
    padding-left: 2.4rem;
    /* extra space for larger icon */
    line-height: 1.8;
}

.tick-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    /* perfectly centers icon vertically */
    width: 1.5em;
    height: 1.5em;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"><path d="M75 12.5C40.5 12.5 12.5 40.5 12.5 75C12.5 109.5 40.5 137.5 75 137.5C109.5 137.5 137.5 109.5 137.5 75C137.5 40.5 109.5 12.5 75 12.5ZM75 125C47.4375 125 25 102.562 25 75C25 47.4375 47.4375 25 75 25C102.562 25 125 47.4375 125 75C125 102.562 102.562 125 75 125ZM103.688 47.375L62.5 88.5625L46.3125 72.4375L37.5 81.25L62.5 106.25L112.5 56.25L103.688 47.375Z" fill="%23003A29"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
}

/******* Why become a member *******/
.why-member-green-section {
    padding-block: 3rem;
}

.member-card {
    background-color: white;
    border-radius: 20px;
    width: 95%;
    padding-inline: 1.2rem;
    padding-block: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 25%);
}

.member-card-row {
    margin-bottom: 2rem;
}

.member-card-title,
.member-card-text,
.bonus-claim ol {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.member-card-title {
    font-size: 1.5rem;
}

.member-card-text {
    font-size: 1rem;
    margin-bottom: 0
}

.incentives {
    margin: 0;
}

.incentives-button {
    padding: 2rem;
}

.center-me {
    text-align: center;
}

.cta-member {
    margin-top: 2rem;
}

/******* Our Clubs *******/
.search-bar input {
    border-radius: 20px;
    border-style: none;
    width: 100%;
    line-height: 1.8rem;
}

.search-bar {
    width: 100%;
    margin: 0 auto;
}

.input-wrapper {
    position: relative;
}

.input-wrapper select,
.input-wrapper input {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.input-wrapper input {
    width: 100%;
    padding: 10px 40px 10px 10px;
    font-size: 1rem;
    box-sizing: border-box;
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.search-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--medGreen);
}

.input-wrapper select {
    width: 100%;
    padding: 10px 40px 10px 10px;
    /* Same as input */
    font-size: 1rem;
    box-sizing: border-box;
    border-radius: 20px;
    border: none;
    line-height: 1.8rem;
    appearance: none;
    /* Optional: removes default styling in some browsers */
    background-color: white;
    /* Match input background */
    color: inherit;
    /* Inherit text color */
    cursor: pointer;
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    width: 100%;
    padding: 10px 40px 10px 10px;
    /* room for icon */
    font-size: 1rem;
    box-sizing: border-box;
    border-radius: 20px;
    border: none;
    line-height: 1.8rem;
    background-color: white;
    color: inherit;
    appearance: none;
    /* hide native arrow */
    cursor: pointer;
}

.select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.select-icon svg {
    width: 20px;
    height: 20px;
    fill: var(--medGreen);
    /* or any color you prefer */
}

.card-club {
    background-color: white;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    padding-inline: 0;
}

.card-club a {
    text-decoration: none;
}

.card-club-image img {
    width: 100%;
    height: 11rem;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    aspect-ratio: 16/9;
}

.card-club-body {
    padding: 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
}

.club-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--medGreen);
    margin-bottom: 0.5rem;
}

.club-details {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.club-detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.club-detail span {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.club-detail svg {
    width: 1rem;
    height: 1rem;
    fill: var(--medGreen);
}

.countries-sel-col,
.card-col {
    padding-top: 1rem;
}

.map-pin {
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.2s ease-in-out, fill 0.2 ease-in-out;
    transform: scale(1);
    fill: var(--white);
}

.map-pin path {
    pointer-events: none;
}

.map-pin.active {
    fill: var(--brightGreen);
    transform: scale(1.1);
}

.countries-sel-col {
    margin-inline: auto;
}

#running-clubs .card-container {
    margin-block: auto;
}

#ClubDetailsCMS {
    margin: 2rem 2rem 2rem 1rem;
}

#innerContainer .section-space .container-fluid.section-space .col-12.col-lg-8 {
    margin-inline: auto;
}

#innerContainer .section-space .container-fluid.section-space .bg-darkgreen.cta-shared .col-12.col-lg-8 {
    margin-inline: auto;
}

/******* End of Our Club ******/



/******* Club news ******/
.club-news-search {
    box-shadow: 8px 8px 14px 3px rgba(0, 0, 0, 0.42);
    -webkit-box-shadow: 2px 4px 8px 1px rgba(100, 100, 100, 0.42);
    -moz-box-shadow: 8px 8px 14px 3px rgba(0, 0, 0, 0.42);
    border-radius: 20px;
    margin-top: 2rem;
}

.news-items-row .item a {
    text-decoration: none;
    color: var(--darkGreen);
}

.news-items-row {
    padding-block: 2rem;
}

/******* Gallery Images Page *****/
.gallery-images-row {
    margin-top: 0rem;
    margin-bottom: 3rem;
    display: flex;
    flex-wrap: wrap;
}

.gallery-image-wrapper {
    padding-inline: 0.2rem;
    padding-block: 0.8rem;
}

.gallery-image-wrapper img {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 20px;
    object-fit: cover;
    display: block;
}

.album-item {
    position: relative;
    margin-inline: auto;
    margin-block: 2rem;
    background-color: transparent;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: 1rem;
    width: 100%;
    height: 80%;
    margin: auto;
}

.gall-img-1 {
    background-image: url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-5.jpg');
}

.gall-img {
    min-height: 23rem;
    background-size: contain;
    border-radius: 1rem;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: cover;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: 1rem;
    min-height: 13rem;
    margin-block: 0.5rem;
    margin-inline: 0rem;
}

span.album-title-caption {
    position: absolute;
    bottom: 7%;
    left: 3%;
    font-size: 1rem;
    font-family: montserrat, sans-serif;
    font-weight: 600;
    font-style: normal;
    width: fit-content;
    color: var(--white);
    text-shadow: 0px 0px 10px #032B4A;
}

.gallery-images-row .card {
    background-color: transparent;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: 1rem;
    width: 23rem;
    margin: auto;
}

.detailSection {
    text-align: center;
}

.detailSection .align-membership-form {
    text-align: center;
}

.align-membership-form .form-control {
    display: unset;
}

.form-control {
    font-family: LibreFranklin;
    margin-block: 0.5rem;
}

select,
textarea {
    font-family: inherit;
}

.form-control .club-option {
    font-family: LibreFranklin;
}

.hyperlink-layer {
    margin: auto;
    border-radius: 1rem;
    width: 23rem;
}

#gallery .card-body {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: 1rem;
    min-height: 15rem;
    margin-block: 0.5rem;
    margin-inline: 0rem;
}

#gallery .card-body.album-item-1 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-2.jpg');
}

#gallery .card-body.album-item-2 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-5.jpg');
}

#gallery .card-body.album-item-3 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-3.jpg');
}

#gallery .card-body.album-item-4 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-4.jpg');
}

#gallery .card-body.album-item-5 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-5.jpg');
}

#gallery .card-body.album-item-6 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-6.jpg');
}

#gallery .card-body.album-item-7 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image.jpg');
}

#gallery .card-body.album-item-8 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-3.jpg');
}

.error-wrapper {
    text-align: center;
}

.club-dropdown-container {
    box-shadow: 8px 8px 14px 3px rgba(0, 0, 0, 0.42);
    -webkit-box-shadow: 2px 4px 8px 1px rgba(100, 100, 100, 0.42);
    -moz-box-shadow: 8px 8px 14px 3px rgba(0, 0, 0, 0.42);
    border-radius: 20px;
    margin-block: 2rem;
}


/******* End of Gallery Page *****/




/******* Article Page *****/
.article-pic {
    display: flex;
    aspect-ratio: 6 / 3;
    background-image: url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/Articles/article-1.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 2rem;
    margin-bottom: 2rem;
    position: relative;
}

.article-visual-area {
    margin-inline: 1rem;
}

.socials-overlay {
    position: absolute;
    bottom: 0rem;
    right: 0rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    padding: 0.6rem 1rem;
    border-radius: 2rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    font-family: sans-serif;
}

.share-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #444;
}

.social-icons a {
    color: #000;
    font-size: 1rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.social-icons a:hover {
    transform: scale(1.15);
    color: #e63946;
}


.article-text-content ol li.point-header {
    font-weight: 600;
    margin-top: 0.6rem;
}

.article-text-content,
.article-text-content p,
.article-text-content span,
.article-text-content div {
    font-family: LibreFranklin !important;
}

.articles-container {
    padding-block: 3rem;
}

.text-card .card-title {
    color: var(--medGreen);
    line-height: 1.8rem;
}

.text-card .card-text {
    color: var(--black);
}

.text-card .link-area {
    text-align: center;
}

.text-card .card-link {
    color: var(--semiBrightGreen);
    text-decoration: none;
}

.text-card {
    border-radius: 2rem;
    border: 0rem;
    box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 25%);
    margin-block: 1rem 2rem;
}

.articles-cards-section .card-title {
    cursor: pointer;
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.articles-cards-section .card-text {
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/******* End of Article Page *****/

/******* Club info *****/
.club-block {
    border-radius: 20px;
    background-color: var(--mintGreen);
}

.club-block-inner {
    padding-block: 2rem;
}

.club-detail-block {
    margin-bottom: 2rem;
}

.club-detail-block p {
    margin-bottom: 0;
}

.club-link {
    color: var(--semiBrightGreen);
    word-break: break-word;
    overflow-wrap: anywhere;
    text-decoration: none;
}


/******* End Club info *****/

/******* Contact Us Page *****/
.national-office-dets {
    margin-block: 2rem 3rem;
}

.contact-dets.text-style-1 a {
    color: var(--black);
}

#contact-us #form1 #innerContainer .borderBody .row {
    justify-content: unset;
}

#contact-us #running-clubs {
    padding-bottom: 3rem;
}

.national-office-dets .office-hours,
.national-office-dets .contact-dets,
.national-office-dets .postal-address,
.national-office-dets .physical-address {
    padding-top: 1rem;
}

/******* End of Contact Us Page *****/


/******* Find a Coach Page *****/
/* ===========================
   DESKTOP TABLE
=========================== */
.table-wrapper {
    max-width: 1300px;
    margin-inline: auto;
    margin-block: 3rem;
    font-family: LibreFranklin;
}

.responsive-table {
    width: 100%;
    border-collapse: collapse;
}

.responsive-table thead {
    background: #0b4f2f;
    color: var(--white);
}

.responsive-table th,
.responsive-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--lightGrey);
    text-align: left;
}

.responsive-table td a {
    color: var(--darkGreen);
    text-decoration: underline;
}


#archive-news .accordion-header {
    width: 100%;
    background: var(--nedbankGreen);
    color: var(--white);
    padding: 14px;
    font-size: 1rem;
    border: none;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

#archive-news .accordion-header span {
    font-size: 1.2rem;
}

#archive-news .accordion-button::after {
    background-image: none;
    mask-image: var(--bs-accordion-btn-icon);
    mask-repeat: no-repeat;
    mask-size: var(--bs-accordion-btn-icon-width);
    background-color: var(--medGreen);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--lightGrey);
    padding: 0 14px;
}

.accordion-content p {
    margin: 10px 0;
    font-size: 0.9rem;
}

.accordion-content a {
    color: var(--black);
}

#find-a-coach .articles-cards-section {
    display: flex;
}

#find-a-coach .table-wrapper .responsive-table {
    display: block;
}

#find-a-coach .table-wrapper .accordion {
    display: none;
}

#find-a-coach .table-wrapper .accordion-item {
    border-bottom: 1px solid var(--lightGrey);
}

#find-a-coach .table-wrapper .accordion-item {
    border-bottom: 1px solid var(--lightGrey);
}

#find-a-coach .table-wrapper .accordion-header {
    width: 100%;
    background: var(--nedbankGreen);
    color: var(--white);
    padding: 14px;
    font-size: 1rem;
    border: none;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

#find-a-coach .table-wrapper .accordion-header span {
    font-size: 1.2rem;
}

#find-a-coach .table-wrapper .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--lightGrey);
    padding: 0 14px;
}

#find-a-coach .table-wrapper .accordion-content p {
    margin: 10px 0;
    font-size: 0.9rem;
}

#find-a-coach .table-wrapper .accordion-content a {
    color: var(--black);
}

/******* End of Find a Coach Page *****/



/******* Archived News Page *****/
#archived-news .card-news-img {
    border-radius: 1rem;
    height: 15rem;
    width: 100%;
    object-fit: contain;
    display: block;
}

#archive .ArchivebodyBackground {
    font-family: LibreFranklin;
    font-size: 1rem;
    color: var(--darkGreen);
    margin-inline: 8rem;
}

#archive .ArchivebodyBackground a {
    color: var(--darkGreen);
}

#innerContainer .borderBody .GalleryBorder {
    width: 100%;
}

#Paging {
    padding-inline: 8rem;
    margin-bottom: 3rem;
}

#Paging>div:first-child {
    float: unset;
}

#Paging>div:last-child {
    float: unset !important;
}

#pageBack {
    color: var(--darkGreen);
    margin-right: 10rem;
}

#pageFrwd {
    color: var(--darkGreen);
}



/******* End of Archived News Page *****/



/******* Newspaper Articles Page *****/
#newspaper-articles .heading-style-1 {
    margin-bottom: 0rem;
}

#newspaper-articles .heading-style-3 {
    margin-top: 2rem;
}

#newspaper-articles .text-style-1 a {
    color: var(--black);
}

/******* End of Newspaper Articles Page *****/

/******* Testimonials ****/
.testimonial-link {
    color: var(--semiBrightGreen);
}

.test-card-wrapper {
    padding: 1rem;
}

#testimonials-container .training-card-wrapper {
    padding: 1rem;
}

#testimonials-container .card {
    border-radius: 20px;
}

#testimonials-container .card-body {
    font-family: LibreFranklin;
}

#testimonials-container .card-title {
    color: var(--medGreen);
    font-size: 1.15rem;
    min-height: 2.8rem;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#testimonials-container .card-text {
    color: var(--black);
    font-size: 1rem;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#testimonials-container .card-body a {
    display: block;
    text-decoration: none;
    color: var(--semiBrightGreen);
    text-align: center;
}

/******* Training Page *****/
#training-nav .nav-link {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: var(--darkGreen);
    font-family: LibreFranklin;
}

#training-nav .nav-link.active {
    background-color: var(--mintGreen);
    border-style: solid;
    border-color: var(--mintGreen);
}

#training-nav .nav-link:hover {
    background-color: var(--mintGreen);
}

#training-articles .training-card-wrapper {
    padding: 1rem;
}

#training-articles .card {
    border-radius: 20px;
}

#training-articles .card-body {
    font-family: LibreFranklin;
}

#training-articles .card-title {
    color: var(--medGreen);
    font-size: 1.15rem;
    min-height: 3rem;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#training-articles .card-text {
    color: var(--black);
    font-size: 1rem;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#training-articles .card-body a {
    display: block;
    text-decoration: none;
    color: var(--medGreen);
    text-align: center;
}

#search-training-articles.search-bar {
    padding-top: 1rem;
}

#search-training-articles input {
    border: 2px solid transparent;
    outline: none;
}

#search-training-articles input:focus {
    border-color: var(--brightGreen);
}

/******* Running Clubs Explorer *******/
.card.info-card {
    border-radius: 2rem;
    padding-bottom: 1rem;
}

#running-clubs .card-header {
    border-radius: 2rem 2rem 0rem 0rem;
    text-align: center;
}

#running-clubs .contacts-area,
#running-clubs .fees-area {
    padding: 1rem;
}

#running-clubs .card-header {
    background-color: var(--nedbankGreen);
    color: var(--white);
}

.info-card .sub-header.text-style-1 {
    text-align: center;
}

.contacts-area.finer-details {
    display: flex;
}

.card-container {
    position: relative;
}

/******* End of Running Clubs Explorer *******/



/******* Clubs and Personal Details *******/
#club-and-personal-details .club-dets {
    background-color: var(--lightGreen);
    border-radius: 2rem;
    padding: 1rem 3rem 2rem 3rem;
    margin-top: 1rem;
}

#club-and-personal-details .page-content-area .heading-style-3 {
    margin-block: 1rem 0.5rem;
}

#club-and-personal-details .page-content-area .email {
    text-decoration: underline;
}

.meet-our-team .btnStyle3.btnTestimonial {
    margin-top: 1rem;
}

.disclaimer-text {
    margin-top: 1rem;
}

.personal-dets-area {
    background-color: var(--lightGreen);
}

.personal-dets-text-area {
    background-color: var(--white);
}

#club-and-personal-details .page-content-area.personal {
    background-color: var(--lightGreen);
    padding-bottom: 4rem;
}

#club-and-personal-details .page-content-area.documents {
    background-color: var(--lightGreen);
    padding-bottom: 4rem;
}

#club-and-personal-details .page-content-area.time-trial-results {
    background-color: var(--lightGreen);
    padding-bottom: 4rem;
}

#club-and-personal-details .page-content-area.news {
    background-color: var(--lightGreen);
    padding-bottom: 4rem;
}

#club-and-personal-details .page-content-area.club-gallery {
    background-color: var(--lightGreen);
    padding-bottom: 4rem;
}

#club-and-personal-details .page-content-area.notices {
    background-color: var(--lightGreen);
    padding-bottom: 4rem;
}

.page-content-area .club-dets .email {
    color: var(--semiBrightGreen);
    word-break: break-word;
    overflow-wrap: anywhere;
}

#club-and-personal-details .personal-dets-text-area {
    background-color: var(--white);
    border-radius: 2rem;
    padding: 1rem 3rem 2rem 3rem;
    margin-top: 1rem;
}

.email-sec .email a {
    color: var(--black);
}

.personal-dets-text-area .buttons-section {
    display: flex;
    justify-content: center;
}

.change-password,
.edit-details {
    margin-inline: 0.5rem;
}

.btnStyle3.btnTestimonial.asa-upload,
.btnStyle3.btnTestimonial.pop-upload {
    margin-block: 1rem;
}

#club-and-personal-details #time-trial-results .personal-dets-text-area {
    text-align: center;
}

#club-and-personal-details #time-trial-results .personal-dets-text-area {
    text-align: center;
}

.asa-form-download {
    color: var(--black);
}

.time-result-item {
    color: var(--black);
}

.view-all-button {
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 500;
    font-family: LibreFranklin;
}

.view-all-button.more-news-btn {
    text-align: right;
}

.view-all-button.more-gallery-btn {
    text-align: right;
}

#club-and-personal-details .card-body.album-item-1 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-2.jpg');
}

#club-and-personal-details .card-body.album-item-2 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-5.jpg');
}

#club-and-personal-details .card-body.album-item-3 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-3.jpg');
}

#club-and-personal-details .card-body.album-item-4 {
    background-image: linear-gradient(180deg, rgba(217, 217, 217, 0%) 68%, rgb(0, 77, 54) 86%, rgba(1, 36, 3, 100%) 100%), url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/01.Home/sample-image-4.jpg');
}

#club-and-personal-details .card-body {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border: 0px solid rgba(0, 0, 0, 0);
    border-radius: 1rem;
    min-height: 15rem;
    margin-block: 0.5rem;
    margin-inline: 0rem;
}

.additional-news {
    display: none;
}

.additional-gallery {
    display: none;
}

#club-gallery .personal-dets-text-area {
    padding-top: 3rem;
}

#notices .personal-dets-text-area {
    text-align: left;
}

.payments-section .eft-image {
    background-image: url('https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/Club-info/eft%20images.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 20rem;
}

.time-results-row {
    justify-content: center;
}

#signed-in-nav .nav-link {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: var(--darkGreen);
    font-family: LibreFranklin;
}

#signed-in-nav .nav-link.active {
    background-color: var(--mintGreen);
    border-style: solid;
    border-color: var(--mintGreen);
}

#signed-in-nav .nav-link:hover {
    background-color: var(--mintGreen);
}

#signed-in-nav {
    border-color: var(--mintGreen);
    margin-top: 4rem;
}

#about-us-nav .nav-link {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    color: var(--darkGreen);
    font-family: LibreFranklin;
}

#about-us-nav .nav-link.active {
    background-color: var(--white);
    border-style: solid;
    border-color: var(--white);
}

#about-us-nav .nav-link:hover {
    background-color: var(--white);
}

#about-us-nav {
    border-color: transparent;
    margin-top: 1rem;
}

.payments-section .btnStyle3.btnTestimonial {
    margin-top: -2rem;
}

/******* End of Clubs and Personal Details *******/


/******* Membership Form *******/

#innerContainer .borderBody .form-control.form-input,
#innerContainer .borderBody .form-select.form-input {
    border-radius: 2rem;
    padding: 0.3rem 1rem;
    margin-block: 0.5rem;
    width: 20rem;
    background-color: #E6E6E6;
    border: 2px solid #E6E6E6;
}

.register-form .form-check {
    margin-top: 2rem;
}

.register-form #btnRegister.btnStyle3 {
    margin-bottom: 1rem;
}

.membership-hyperlink,
.login-redirect,
.terms-conditions-area,
.terms-conditions-link {
    font-family: LibreFranklin;
    color: var(--darkGreen);
}

.change-password-row-button {
    text-align: center;
    margin-block: 0.5rem;
}

.change-password-heading {
    text-align: center;
}

.change-password-field {
    margin-inline: auto;
    text-align: center;
}

.change-password-error-row {
    text-align: center;
}

#ddlNationality,
#ddlGender,
#ddlProvinces,
#ddlCountries,
#ddlNedbankClient,
#ddlAddToMailList {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.asa-detail .asa-sub-desc {
    margin-inline: auto;
}

/******* End of Membership Form *******/



/******* Register Form *******/
#form1 #innerContainer .borderBody .row {
    justify-content: center;
}


/******* End of Register Form *******/



/******* Elite Profiles *******/
#elite-profiles .training-card-wrapper {
    padding: 1rem;
}

#elite-profiles .card {
    border-radius: 20px;
}

#elite-profiles .card-body {
    font-family: LibreFranklin;
}

#elite-profiles .card-title,
#elite-runners-profiles .card-title {
    color: var(--medGreen);
    font-size: 1.2rem;
    font-weight: 700;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 0rem;
}

#elite-profiles .card-text {
    color: var(--black);
    font-size: 1rem;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#elite-profiles .card-body a {
    display: block;
    text-decoration: none;
    color: var(--medGreen);
    text-align: center;
}

#elite-profiles .text-style-3 {
    margin-bottom: 0.5rem;
}

#elite-profiles.page-content-area {
    background-color: var(--mintGreen);
    padding-bottom: 3rem;
}

.elite-profile-dropdown {
    margin-inline-start: auto;
}

#ddlEliteRunners,
#ddlClubsNewsFilter,
#ddlClubsFilter {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/*********** TEMP ELITE PROFILE ************/

#temp-elite-profiles {
    background-color: var(--mintGreen);
    font-family: LibreFranklin;
}

#temp-elite-profiles a {
    color: var(--black);
}

#temp-elite-profiles p {
    margin-bottom: 0.3rem;
}

#temp-elite-profiles .heading-style-3 {
    color: var(--medGreen);
    margin-block: 2rem 0rem;
}

#temp-elite-profiles.page-content-area {
    padding-bottom: 3rem;
}

#temp-elite-profiles .temp-elite-profiles {
    margin-top: 0rem;
}

/*********** End of TEMP ELITE PROFILE ************/

#elite-runners-profiles .elite-card-wrapper {
    padding: 1rem 2rem;
}

#elite-runners-profiles .btnStyle3.btnTestimonial {
    width: -webkit-fill-available;
    min-width: 4rem;
    margin-bottom: 1rem;
}

.elite-card-wrapper .card {
    border-radius: 1rem;
    box-shadow: 0px 5px 7px 2px rgba(0, 0, 0, 25%);
    border: 0px solid rgba(0, 0, 0, .125);
    height: auto;
}

.elite-card-wrapper .card-img-top {
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: top;
    background-position-x: center;
    border-radius: 1rem 1rem 0rem 0rem;
    width: auto;
    height: 20rem;
    min-height: 20rem;
    width: 100%;
    object-fit: unset;
}

.elite-card-wrapper .card-img-top.lyno-muchena {
    background-image: url("https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/runners/lyno-muchena.png");
}

.elite-card-wrapper .card-img-top.two-oceans-2 {
    background-image: url("https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/runners/george.png");
}

.elite-card-wrapper .card-img-top.two-oceans-3 {
    background-image: url("https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/runners/onalena.png");
}

.elite-card-wrapper .card-img-top.two-oceans-4 {
    background-image: url("https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/runners/landie.png");
}

.elite-card-wrapper .card-img-top.two-oceans-5 {
    background-image: url("https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/runners/fikile.png");
}

.elite-card-wrapper .card-img-top.two-oceans-6 {
    background-image: url("https://eolstoragewe.blob.core.windows.net/wm-1768198-cmsimages/runners/slindile.png");
}


/******* End of Elite Profiles *******/




/******* Footer *******/

.footTop .FootLink, .footBot .FootLink{
    color: var(--white);
    text-decoration: none;
}

.partner-cont img.img-fluid {
    margin-block: auto;
    margin-inline: 2rem;
}

.partner-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.partners-row {
    padding-inline: 16rem;
    background-color: var(--white);
}

#footer-and-logos .container-fluid.partners-area {
    background-color: var(--white);
}

.WebSiteBottom {
    background: linear-gradient(88.431deg, rgba(1, 61, 43, 90%) 0%, #003A29 50%, #110f0f 94%);
}

#footer-area {
    padding: 4rem 8rem 2rem 8rem;
    font-family: LibreFranklin;
    /* background: linear-gradient(88.431deg, rgba(1, 61, 43, 90%) 0%, #003A29 50%, #110f0f 94%); */
    color: var(--white);
}

.FootHead {
    font-weight: 600;
    margin-block: 2rem 0.5rem;
}

.FootLink {
    cursor: pointer;
}

.footTop,
.footBot {
    margin-block: 1rem 0.3rem;
}

.legal-details {
    margin-top: 1rem;
}

.contact-form {
    padding: 2rem;
    border-radius: 2rem;
    background-color: var(--medGreen);
}

.contact-title {
    margin-bottom: 1rem;
}

.contact-form .form-control {
    border-radius: 2rem;
    padding: 0.6rem;
    margin-bottom: 0.5rem;
}

.btnStyle1.home-button-space.float-end {
    text-align: center !important;
    justify-content: center !important;
    display: flex;
}

.button-area {
    display: flex !important;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: stretch;
}

#footer-and-logos .partners-area {
    border-top: 1rem solid transparent;
    border-image: linear-gradient(180deg, rgb(219, 246, 238, 0.4), rgba(0, 57, 41, 0.56)) 108;
}

#ValidateOtpPage {
    margin-block: 9rem 3rem;
}

#ValidateOtpPage .OtpInputsContainer .OtpInputs input {
    width: 2rem;
    border-inline: transparent;
    border-top: transparent;
    margin-inline: 0.5rem;
    text-align: center;
}

#ValidateOtpPage .OtpInputsContainer .OtpInputs {
    text-align: center;
    margin-block: 3rem 2rem;
}

#ValidateOtpPage #btnResendOtp.btnStyle3,
#ValidateOtpPage #btnResendOtp.btnStyle3:hover {
    border: transparent;
    color: var(--black);
    background-color: transparent;
    padding-inline: 0rem;
    padding-block: 0rem;
    text-decoration: underline;
    min-width: unset;
    margin-bottom: 1rem;
}

#RegisterPage {
    margin-block: 9rem 3rem;
}

#RegisterPage .form-check-input:checked {
    background-color: var(--darkGreen);
    border-color: var(--darkGreen);
}

#RegisterPage #linkTermsAndConditions {
    color: var(--darkGreen);
}

#MembershipFormPage {
    margin-bottom: 3rem;
}

#MembershipFormPage #formDetails .align-membership-form {
    text-align: center;
}

#MembershipFormPage #formDetails .align-membership-form .heading-member-form {
    margin-block: 3rem 1rem;
}

#LoginPage {
    margin-block: 9rem 3rem;
}

#LoginPage .login-redirect {
    padding-top: 1rem;
}

#LoginPage .login-form.text-center {
    position: relative;
}

#LoginPage .forgot-password-text {
    position: relative;
    right: 3.7rem;
}

.hiddenFileInput {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/***** Dashboard *****/
.file-upload-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid var(--medGreen);
    width: 80%;
    border-radius: 20px;
}

.modal-content p {
    text-align: center;
}

.close {
    color: #aaaaaa;
    margin-left: auto;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.asaContainer {
    display: flex;
    margin-top: 0rem;
    justify-content: center;
    gap: 2rem;
    background-color: var(--medGreen);
    color: white;
    padding: 30px;
}

#AsaFormDownloadCMS {
    height: fit-content;
    margin-block: auto;
}

.asaContainer .text-style-1 {
    margin-block: auto;
}

/***** End Dashboard *****/
.fa-solid.fa-arrow-down {
    color: var(--white);
}

.newsletterListContainer {
    padding-inline: 8rem;
}

.newsletterListContainer a {
    font-size: 1rem;
    color: var(--black);
    font-family: LibreFranklin;
}

h1:has(+ .newsletterListContainer) {
    font-family: LibreFranklin;
    margin-bottom: 2rem;
    width: 100%;
    padding: 3rem 8rem;
    color: #fff;
    font-size: 2.5rem;
    font-weight: 600;
    background: linear-gradient(90deg,
            #1f1f1f 0%,
            #1f3f36 30%,
            #2f8f5f 60%,
            #2dff7a 100%);
}

#GoButton,
#PageText {
    border-radius: 1rem;
    min-width: 4rem;
    margin-block: 1rem 3rem;
}

.newsletterListContainer~#paging {
    padding-inline: 8rem;
    font-family: LibreFranklin;
}

.newsletterListContainer~#paging a {
    color: var(--black);
}

#archive #dMain::before {
    content: "Archived news";
    display: block;
    font-weight: 600;
    line-height: 1.2;
    font-family: LibreFranklin;
    margin-bottom: 2rem;
    width: 100%;
    padding: 3rem 8rem;
    color: #fff;
    font-size: 2.5rem;
    background: linear-gradient(90deg,
            #1f1f1f 0%,
            #1f3f36 30%,
            #2f8f5f 60%,
            #2dff7a 100%);
}

.GalleryBorder {
    width: 100% !important;
}

#archive .ArchivebodyBackground {
    margin-inline: 8rem;
}


/******* Large Screens *******/
@media (min-width:992px) and (max-width: 1600px) {
    section.page-content-area {
        padding-inline: 4rem;
    }
}


@media (min-width: 992px) {
    .partners-row .partner-cont .img-fluid {
        max-width: 75%;
    }

    #find-a-coach .table-wrapper .responsive-table {
        display: block;
    }

    #find-a-coach .table-wrapper .accordion {
        display: none;
    }

    .tab-content.personal-dets-area .heading-style-6 {
        margin-top: 0rem;
    }
}

/******* Med-Large Screens *******/
@media (max-width: 1199.98px) {
    .btn-cta {
        padding-inline: 2rem;
    }

    .step-logo-div svg {
        width: 100%;
    }

    .member-card {
        padding-inline: 1rem;
        padding-block: 1.8rem;
    }

    #training-nav .nav-link {
        border-radius: 20px;
    }

    #about-us-nav .nav-link {
        border-radius: 20px;
    }
}

/******* Tablet Screens *******/
@media (max-width: 991.98px) {


    #navbar {
        position: fixed;
        top: 0 !important;
        left: 0;
        width: 100%;
        z-index: 9999;
        transition: none !important;
    }

    /******* Home *******/
    .vid-container {
        width: 75vw;
        height: auto;
    }

    .btn-cta {
        padding-inline: 1.5rem;
        padding-block: 0.6rem;
    }

    .txt-cta-title {
        font-size: 2.2em;
    }

    .btnStyle3.btnTestimonial {
        margin-block: 1.5rem 0rem;
    }

    .img-about-us-div {
        padding-block: 1rem;
        display: flex;
    }

    #navbarSupportedContent.collapse.navbar-collapse {
        justify-content: center;
        text-align: center;
    }

    section.page-content-area {
        padding-inline: 2rem;
        padding-block: 2rem;
    }

    .page-header,
    .page-header-clubs {
        padding-inline: 2rem;
        margin-top: 9rem;
    }


    /******* FAQ *******/
    .cta-btn {
        width: 100%;
    }

    .cta-btn-div {
        margin-top: 0;
    }

    .cta-btn {
        margin-top: 0.5rem;
        width: 80%;
    }

    .faq-contact-btn {
        width: 80%;
    }

    .step-1-row {
        padding-bottom: 0;
    }

    .partners-area .partners-row {
        padding-inline: 4rem;
    }

    .partner-cont {
        padding: 1rem;
    }

    .partner-cont img.img-fluid {
        margin-inline: 1rem;
    }

    #footer-area {
        padding: 2rem 3rem 2rem 3rem;
    }

    #club-and-personal-details .page-content-area .heading-style-3 {
        margin-block: 2.5rem 0.5rem;
    }

    .time-results {
        text-align: center;
    }

    #elite-runners-profiles .elite-card-wrapper {
        padding: 1rem 1rem;
    }

    #navbarSupportedContent .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    #find-a-coach .table-wrapper .responsive-table {
        display: none;
    }

    #find-a-coach .table-wrapper .accordion {
        display: block;
    }

    #club-and-personal-details .heading-style-6 {
        margin-top: 2rem;
    }

    /* #running-clubs .heading-style-1 {
        margin-left: 2rem;
    } */

    #running-clubs .countries-sel-col,
    #running-clubs .card-col {
        padding-inline: 2rem;
    }

    .newsletterListContainer {
        padding-inline: 2rem;
    }

    h1:has(+ .newsletterListContainer) {
        font-family: LibreFranklin;
        text-align: center;
        line-height: 1.2;
        padding: 4rem 0rem 1rem 0rem;
        margin-bottom: 1rem;
        font-size: 1.6rem;
        font-weight: 500;
    }

    #GoButton,
    #PageText {
        margin-block: 1rem 2rem;
    }

    .newsletterListContainer~#paging {
        padding-inline: 2rem;
    }

    #Paging {
        padding-inline: 2rem;
        margin-bottom: 3rem;
    }

    #archive #dMain::before {
        font-family: LibreFranklin;
        text-align: center;
        line-height: 1.2;
        padding: 4rem 0rem 1rem 0rem;
        margin-bottom: 1rem;
        font-size: 1.6rem;
        font-weight: 500;
    }

    #archive .ArchivebodyBackground {
        margin-inline: 2rem;
    }

    .nav-item #login-btn {
        margin-block: 0.7rem;
    }

    #innerContainer .borderBody .form-control.form-input,
    #innerContainer .borderBody .form-select.form-input {
        width: 17rem;
    }

    #about-us-top-section {
        padding-inline: 1rem;
    }

    .txt-section-heading.winners {
        margin-inline: 1rem;
    }

    .page-content-section.balls-section .heading-style-1 {
        margin-inline: 1rem;
    }

    #article section.page-content-area {
        padding-inline: 0.5rem;
        padding-block: 0rem;
    }

    #coach-accordion .accordion-body a {
        color: #212529;
    }

    .navbar-brand.logo .logo-img {
        width: 70%;
    }
}

/******* Mobile Screens *******/
@media (min-width: 767.98px) {
    body {
        padding-top: 6rem;
        /* same height as the navbar */
    }
}



/******* Mobile Screens *******/
@media (max-width: 767.98px) {

    section.page-content-area {
        padding-inline: 1rem;
        padding-block: 2rem;
    }

    .home-heading {
        font-size: 3rem;
    }

    .landing-text-bold {
        font-size: 1.3rem;
    }

    .landing-text {
        font-size: 1.3rem;
    }

    .txt-test-quote {
        font-weight: 600;
        font-size: 1rem;
    }


    .txt-page-heading {
        text-align: center;
    }

    .page-header,
    .page-header-clubs {
        padding-block: 1rem;
    }

    .txt-section-heading {
        font-size: calc(1.375rem + 1.5vw);
        margin-top: 1rem;
    }

    .page-content-section {
        padding-block: 1rem;
    }

    .partners-area .partners-row {
        padding-inline: 1rem;
    }

    .partner-cont {
        padding: 0.5rem;
    }

    .partner-cont img.img-fluid {
        margin-inline: 0rem;
    }

    /* Position the next/prev button */
    .carousel-control-prev {
        left: 0rem;
    }

    .carousel-control-next {
        right: 0rem;
    }

    /******* Home *******/
    .home-banner-images {
        height: 30vh;
        margin-left: auto;
        margin-right: auto;
        width: auto;
    }

    .img-background {
        background-image: url('https://myactive-cdn-bzf7hybveyewfjdh.a02.azurefd.net/wm-1768198-cmsimages/General/home-background.webp');
        background-size: 100% 100%;
    }

    .dark-bg {
        background-color: var(--medGreen);
        padding: 10rem 1rem 3rem 1rem;
        text-align: center;
    }

    .dark-bg .home-heading,
    .dark-bg .landing-text-bold,
    .dark-bg .landing-text {
        text-align: center;
    }

    .btnStyle1.home-button-space.float-end {
        text-align: center !important;
        justify-content: center !important;
        display: flex;
    }

    .heading-style-4 {
        font-size: 2rem;
        line-height: 2.1rem;
    }

    .button-area {
        display: flex !important;
        justify-content: space-between;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: stretch;
    }

    .heading-style-1 {
        font-size: 2rem;
    }

    .vid-container {
        width: 80vw;
        height: auto;
    }

    .section-space {
        padding-block: 2rem;
        padding-inline: 0.5rem;
    }

    .mobile-hide {
        display: none;
    }

    .stat {
        font-size: 3rem;
    }

    .home-cta {
        border-radius: 500px;
        padding: 1rem;
    }

    .btn-cta-mobile {
        margin-top: 0.5rem;
    }

    .testimonial-runner-col {
        margin-block: 2rem;
    }

    .testimonial-quote-div {
        padding-bottom: 3rem;
    }

    .step-heading {
        font-size: calc(1.375rem + 1.5vw);
    }

    .step-heading-div {
        text-align: center;
    }

    .step-logo-div svg {
        width: 100%;
    }

    .step-3-card {
        width: 100%;
    }

    /******* Clubs *******/
    .search-bar .select-wrapper {
        margin-top: 1.5rem;
    }

    .card-news-img {
        min-height: 16rem;
    }

    .article-visual-area {
        margin-inline: 0rem;
    }

    #clubDetailsDiv .btnStyle3.btnTestimonial {
        margin-block: 1rem 2.5rem;
    }

    #clubDetailsDiv .meet-our-team {
        display: none;
    }

    /******* Gallery Images ******/
    .gallery-images-row {
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    .step-number {
        width: 2rem;
        height: 2rem;
        font-size: 1.5rem;
    }

    .mobile-benefits-carousel {
        margin-bottom: 2rem;
    }

    #footer-area .contact-form {
        margin-top: 1rem;
    }

    #footer-area .footer-text-area {
        text-align: center;
    }

    #footer-area {
        padding: 0rem 2rem 1rem 2rem;
    }



    /******* Club info *****/
    /* .club-block {
        border-radius: 2rem;
    } */

    /******* End Club info *****/

    #club-and-personal-details .club-dets {
        padding: 1rem 1rem 2rem 1rem;
    }

    #club-and-personal-details .personal-dets-text-area {
        padding: 1rem 1rem 2rem 1rem;
    }

    .personal-dets-text-area .buttons-section {
        display: grid;
    }

    .payments-section .eft-image {
        display: none;
    }

    #club-and-personal-details .personal-dets-text-area .account-details .send-to {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    #club-and-personal-details .payments-section .personal-dets-text-area {
        padding: 1rem 2rem 2rem 2rem;
    }

    .payments-section .btnStyle3.btnTestimonial {
        margin-top: 2rem;
    }
}